<template>
  <div class="login">
    <van-nav-bar @click-left="onClickBack" @click-right="onClickHelp" :border="false">
      <template #left>
        <i class="m_fs18 iconfont icon-fanhui"></i>
      </template>
      <template #right>
        <div class="m_fs18">帮助</div>
      </template>
    </van-nav-bar>

    <div class="m_fs28 m_fw title">登录</div>

    <form>
      <div class="m_flex field">
        <input class="m_f1 m_fs18" type="text" placeholder="输入手机号" v-model="phone">
      </div>
      <div class="m_flex m_faic field" v-if="isLogByCode">
        <input class="m_f1 m_fs18" type="text" placeholder="输入6位验证码" v-model="code">
        <van-button size="small" @click.prevent="getCode" :disabled="disableCodeBtn"
        class="m_fs14 codebtn">{{countTxt}}</van-button>
      </div>
      <div class="m_flex field" v-else>
        <input class="m_f1 m_fs18" type="password" placeholder="输入密码" v-model="password">
      </div>
      <div class="m_fs14 agree">
        <i class="m_br50p m_fs14 m_tac m_fw iconfont gou" :class="agreed?'icon-dagou':''" 
        @click="agreed=!agreed"></i>
        已阅读并同意 <a @click="toNotice('用户协议')">用户协议</a> 和 <a @click="toNotice('隐私政策')">隐私政策</a> 
      </div>
      <van-button loading-text="登录" size="normal" block class="m_fw m_fs18"
      :loading="isLoading" :color="disableLoginBtn?'#d9d9db':'#008080'"
      :disabled="disableLoginBtn" @click.prevent="onSubmit">登录</van-button>
      <div v-if="isLogByCode" class="m_fs14 m_tac logBy">
        <a @click="changeLogStyle">账号密码登录</a>
      </div>
      <div v-else class="m_fs14 m_tac logBy">
        <a @click="changeLogStyle">验证码登录</a> |
        <a @click="$router.push('/verify')">找回密码</a>
      </div>
    </form>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: 'Login',
  data(){
    return{
      agreed: false,
      disableLoginBtn: true,
      disableCodeBtn: false,
      isLoading: false,
      isLogByCode: true,
      phone: '13488888881',
      code: '',
      yzm: '',
      password: '',
      count: 60,
      countTxt: '发送验证码',
      timer: null,
    }
  },
  computed:{
  },
  methods: {
    ...mapMutations('m_user',['setToken','setUserinfo']),
    // 返回
    onClickBack(){
      this.$router.back()
    },
    // 帮助
    onClickHelp(){
      this.$dialog.confirm({
        title: '登录遇到问题？',
        message: '官方客服QQ 010-2022\n(10:00 - 17:00)',
        confirmButtonText: '我知道了',
        confirmButtonColor: '#008080',
        showCancelButton: false
      })
    },
    // 60秒倒计时
    countdown(){
      this.countTxt = `${this.count}s后可重发`
      this.timer = setInterval(() => {
        this.count--
        if(this.count==-1){
          clearInterval(this.timer)
          this.count = 60
          this.countTxt = '发送验证码'
          this.disableCodeBtn = false
        }else{
          this.countTxt = `${this.count}s 后可重发`
        }
      }, 1000);
    },
    // 获取验证码
    getCode(){
      if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)){
        return this.$toast({message:'手机号错误', position:'top'})
      }else{
        this.axios.post('api/code',{phone: this.phone})
          .then(res=>{
            if(res.code === 0){
              this.disableCodeBtn = true
              this.countdown()
              this.code = res.yzm
              this.yzm = res.yzm
            }else{
              this.$toast({message:'发送验证码失败', position:'top'})
            }
          })
      }
    },
    // 登录
    onSubmit(){
      if(!this.agreed) return this.$toast({message:'请先同意协议', position:'top'})
      if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone))
        return this.$toast({message:'手机号错误', position:'top'})
      if(this.isLogByCode){
        if(this.yzm != this.code)
          return this.$toast({message:'验证码错误', position:'top'})
      }else{
        if(this.password.trim().length==0)
          return this.$toast({message:'密码错误', position:'top'})
      }
      this.isLoading = true
      let type = this.isLogByCode? 'code': 'password'
      let data
      if(this.isLogByCode){
        data = {phone: this.phone, code: this.code, type}
      }else{
        data = {phone: this.phone, password:this.password, type}
      }
      this.axios.post('api/login',data)
        .then(res=>{
          this.isLoading = false
          if(res.code==0){
            this.setToken(res.token)
            this.getUserinfo()
            this.code = ''
            this.phone = ''
            this.$router.replace(localStorage.getItem('goto'))
          }else{
            this.$toast({message: res.msg, position:'top'})
          }
        })
    },
    // 登录成功，获取用户信息
    getUserinfo(){
      axios.get('userinfo').then(res=>{
        if(res.code==0){
          this.setUserinfo(res.dt)
        }
      })
    },
    // 更换登录方式
    changeLogStyle(){
      this.isLogByCode = !this.isLogByCode
      this.phone = '13488888888'
      this.code = ''
      this.password = ''
      this.agreed = false
    },
    // 去公告页
    toNotice(tit){
      this.$router.push({path:'/notice', query: {tit}})
    }
  },
  updated(){
    // 登录按钮可用/禁用
    if(this.phone.length!=0 && (this.code.length!=0 || this.password.length!=0)){
      this.disableLoginBtn = false
    }else{
      this.disableLoginBtn = true
    }
  }
}
</script>

<style lang="scss" scoped>
.login{
  .title{
    line-height: 80px;
    padding: 0 20px;
  }
  a{ color: #008080;}
  form{
    padding: 0 20px;
    .field{
      gap: 3px;
      height: 45px;
      margin-bottom: 16px;
      input{
        width: 0;
        height: 100%;
        border-bottom: 1px solid #ebebeb;
        &::placeholder{
          color: #8f8f91;
        }
      }
    }
    .codebtn{ 
      width: 110px;
      height: 35px;
      color: #8f8f91;
    }
    .agree{
      margin-bottom: 16px;
      color: #8c8c8c;
      .gou{
        display: inline-block;
        width: 12px;
        height: 12px;
        line-height: 12px;
        border: 1px solid #8c8c8c;
        vertical-align: middle;
        color: #008080;
      }
    }
    .logBy{margin-top: 16px;}
  }
}

</style>